<template>
  <div>
    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="diglogTitle" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false" custom-class="show-back-class">
      <div style="height: 680px">
        <div style="height: 100%;width: 30%;float: left" >
          <el-scrollbar class="stdUnitScrollbarDiv" style="height: 100%;background-color:#07314E;" v-if="menuList.length>0">
            <el-table  ref="menuTreeTableRef" :data="menuList" :show-header="false" default-expand-all
                        row-key="id" highlight-current-row
                        @row-click="clickMenu" row-class-name="treeTableRow"
                        style="background-color: #17506a !important;"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
              <el-table-column label="名称" align="left" prop="name" >
                <template slot-scope="scope">
                  <i v-if="scope.row.type===1" class="el-icon-location"></i>
                  <span >{{ scope.row.name}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div style="height: 100%;width: 70%;;float: left">
          <fuel-use ref="fuelUseRef" v-if="showId == 10"/>
          <fugitive-emissions ref="fugitiveEmissionsRef" v-if="showId == 11"/>
          <purchased-energy ref="purchasedEnergyRef" v-if="showId == 12"/>
          <material-inputs ref="materialInputsRef" v-if="showId == 13"/>
          <logistics ref="logisticsRef" v-if="showId == 14"/>
          <travel ref="travelRef" v-if="showId == 15"/>
          <commuting ref="commutingRef" v-if="showId == 16"/>
          <waste-water ref="wasteWaterRef" v-if="showId == 17"/>
          <apportionment ref="apportionmentRef" v-if="showId == 18"/>
          <product-apportionment ref="productApportionmentRef" v-if="showId == 19"/>
          <result-year ref="resultYearRef" v-if="showId == 20"/>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: 10px"></div>
    </el-dialog>

  </div>

</template>

<script>
import fuelUse from '@/views/bigScreen/runCarbonEmission/otherEnterprise/fuelUse';
import fugitiveEmissions from '@/views/bigScreen/runCarbonEmission/otherEnterprise/fugitiveEmissions';
import purchasedEnergy from '@/views/bigScreen/runCarbonEmission/otherEnterprise/purchasedEnergy';
import materialInputs from '@/views/bigScreen/runCarbonEmission/otherEnterprise/materialInputs';
import logistics from '@/views/bigScreen/runCarbonEmission/otherEnterprise/logistics';
import travel from '@/views/bigScreen/runCarbonEmission/otherEnterprise/travel';
import commuting from '@/views/bigScreen/runCarbonEmission/otherEnterprise/commuting';
import wasteWater from '@/views/bigScreen/runCarbonEmission/otherEnterprise/wasteWater';
import apportionment from '@/views/bigScreen/runCarbonEmission/otherEnterprise/apportionment';
import productApportionment from '@/views/bigScreen/runCarbonEmission/otherEnterprise/productApportionment';
import resultYear from '@/views/bigScreen/runCarbonEmission/otherEnterprise/resultYear';



export default {
  name: "ProductCarbonStageForm",
  components:{
    fuelUse,fugitiveEmissions,purchasedEnergy,materialInputs,logistics,travel,commuting,wasteWater,apportionment,productApportionment,resultYear
  },
  data() {
    return {
      open: false,
      diglogTitle: '',
      menuList:[],
      showId: 0
    };
  },
  created() {
  },
  methods: {
    handleShow(row) {
      // this.menuList = row;
      // this.open = true;
      this.menuList=[
        {
          name: '燃料使用',
          parentId: 100,
          id: 10,
          type: 1,
        },
        {
          name: '逸散性排放',
          parentId: 101,
          id: 11,
          type: 1,
        },
        {
          name: '能源购买',
          parentId: 102,
          id: 12,
          type: 1,
        },
        {
          name: '原材料投入',
          parentId: 103,
          id: 13,
          type: 1,
        },
        {
          name: '物流',
          parentId: 104,
          id: 14,
          type: 1,
        },
        {
          name: '差旅',
          parentId: 105,
          id: 15,
          type: 1,
        },
        {
          name: '员工通勤',
          parentId: 106,
          id: 16,
          type: 1,
        },
        {
          name: '废弃物',
          parentId: 107,
          id: 17,
          type: 1,
        },
        {
          name: '客户分摊',
          parentId: 108,
          id: 18,
          type: 1,
        },
        {
          name: '产品分摊',
          parentId: 109,
          id: 19,
          type: 1,
        },
        {
          name: '结果',
          parentId: 110,
          id: 20,
          type: 1,
        },
      ];
      this.diglogTitle = this.menuList[0].name;
      this.showId = this.menuList[0].id;
      this.open = true;
    },
    clickMenu(row, column, event){
      this.showId = row.id;
      this.diglogTitle = row.name;
    },
  }
};
</script>
<style lang="scss">

  .treeTableRow{
    background-color: #092038 !important;
    color: #fff !important;
   .el-icon-arrow-right{
     color: #fff !important;
   }
    td{
      border-bottom:0 solid #dfe6ec  !important;
    }
  }

  .treeTableRow.current-row{
    color: #FEE034 !important;
    td{
      background-color: #545c64 !important;
    }
  }
  .treeTableRow:hover{
    background-color: #3d4349 !important;
    td{
      // background-color: #3d4349 !important;
      background-color: #2496c9 !important;
    }
  }

</style>
